* {
    box-sizing: border-box;
}
html {
    font-size: 32px;
    color: gainsboro;
    height: 100%;
}

body {
    margin: auto;
    height: 100%;
    position: relative;
    background-image: url('../images/background\ website\ 1\ \ \ Zellox.gif');
    background-attachment: fixed;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
}

h1, h3 {
    opacity: 0;
    font-family: 'Fjalla One', sans-serif;
}
h1 {
    font-size: 2.5rem;
}
h3 {
    font-size: 1.5rem;
}
a {
    text-decoration: none;
    color: snow;
}

.splashContainer {
    margin: auto;
    border-radius: 12px;
    display: grid;
    width: 90%;
    height: 95%;
    grid-template-areas:
    'top-left top-left top-right'
    'bottom-left bottom-right bottom-right';
    grid-gap: 2px;
}
.top-left {
    grid-area: top-left;
    background-color: rgba(107, 177, 177, 0.75);
    border-top-left-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-right {
    grid-area: top-right;
    border-top-right-radius: 12px;
    background-color: rgba(111, 120, 178, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-left {
    grid-area: bottom-left;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 2s, color 1s 0.8s;
    border-bottom-left-radius: 12px;
}
.bottom-left:hover {
    cursor: pointer;
    background-color: snow;
    color: darkslategray;
}

.bottom-right {
    grid-area: bottom-right;
    background-color: rgba(164, 94, 185, 0.75);
    border-bottom-right-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fade .splashContainer {
    animation: fade 2s;
    opacity: 0;
}
@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}
@keyframes spin {
    0% {transform-origin: center; transform: rotate(0deg);}
    4% {transform-origin: center; transform: rotate(-18deg);}
    40%, 100% {transform-origin: center; transform: rotate(360deg);}
}

@media only screen and (min-width:900px) and (min-device-width: 900px) {
    .loaded .top-left {
        transform-origin: right; 
        animation: growLeft 2s;
    }
    .loaded .top-right {
        transform-origin: bottom left;
        animation: growTopRight 2.8s;
    
    }
    .loaded .bottom-right {
        transform-origin: top left;
        animation: growBottomRight 3s;
    }
    .loaded h1, .loaded h3 {
        transition: opacity 2s 3.5s;
        opacity: 1;
    }
    .loaded .secondTransition {
        animation: spin 4s 5.5s infinite;
    }
    
    
    @keyframes growLeft {
        0% {transform: scaleX(0);}
        100% {transform: scaleX(1);}
    }
    @keyframes growTopRight {
        0% {transform: scaleY(0);}
        100% {transform: scaleY(1)}
    
    }
    @keyframes growBottomRight {
        0% {transform: scaleY(0) scaleX(0);}
        100% {transform: scaleY(1) scaleX(1);}
    }
}

@media only screen and (max-device-width: 900px), (max-width:900px) {
    h1, h3 {
        opacity: 0;
        transform: scaleX(0); 
        background-color: snow; 
        color: transparent;
        transform-origin: left;
    }
    .loaded .firstTransition {       
        opacity: 1;
        transform: scaleX(1);
        background-color: transparent; 
        color: snow;
        transition: transform 1s ease-out , background-color 1s 1s, color 1s 1s;    
    }
    .loaded .secondTransition {
        opacity: 1;
        transform: scaleX(1);
        background-color: transparent; 
        color: snow;
        transition: transform 1s ease-out 1s, background-color 1s 2s, color 1s 2s;
        animation: spin 4s 5s infinite;
    }
    .loaded .thirdTransition {
        opacity: 1;
        transform: scaleX(1);
        background-color: transparent; 
        color: snow;
        transition: transform 1s ease-out 3s, background-color 1s 4s, color 1s 4s;
    }
    .loaded .fourthTransition {
        opacity: 1;
        transform: scaleX(1);
        background-color: transparent; 
        color: snow;
        transition: transform 1.5s ease-out 2s, background-color 1s 3.5s, color 1s 3s;
    }
    .splashContainer {
        width: 100%;
        height:100%;
        grid-gap: 0;
    }
    .top-left, .top-right, .bottom-left, .bottom-right {
        border-radius: 0px;
    }
    
}

@media only screen and (max-device-width: 630px), (max-width: 640px) {
    .splashContainer {
        width: 100%;
        grid-template-areas: 
        "top-left"
        "top-right"
        "bottom-left"
        "bottom-right";
    }
    h1, h3 {
        font-size: 1.5rem;
    }
}