/* responsive for only 2 screens; 1440px & 425px specifically */

:root{
    --nav-color:#002B5B;

    --bolded-words1: #F765A3;
    --bolded-words2: #002B5B;
    --brighter-words2:#4c74a2;
    --brighter-words1:#ef9abd;
    --darker: #F5B2B2;
    --lighter: #FFE7E7;
    --body-bg:#F9D1D1;
}

/* *{
    outline: 2px solid red;
} */

body{
    overflow-x: hidden;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color:var(--body-bg);    
}

.page-wrapper{
    margin-left: 10%;
    margin-right: 10%;
}

nav {
    position:fixed;
    top:0px;
    left:0px;

    font-size:1.2rem;

    width: 100%;

    background-color:var(--nav-color);

    z-index: 10;
}

.nav-logo-title{    
    padding-left:20px;
    padding-top: 10px;
    padding-bottom:10px;
}

.nav-logo-title a{
    position:absolute;

    transform: translate(20px, 10px);
}

.nav-logo-title img{
    max-width:30px;
    content:url("https://freepngimg.com/download/shrek/24519-7-shrek-free-download.png");
}

nav ul{
    position: absolute;

    top:0px;
    width:40%;
    right:10%;

    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

nav li{
    list-style: none;
    padding-right:10px;
}

nav > img{
    /* idk what to write here */
    src:url("https://www.freepnglogos.com/uploads/shrek-png/shrek-icon-web-icons-png-0.png");
}

a{
    color:white;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

a:active{
    color:goldenrod;
    text-decoration:underline;
}

#header, #content, #creativity{
    padding-top: 70px;
    /* margin-bottom:50px; */
}

#header{
    position:relative;

    display:flex;
    justify-content: space-around;

    /* flex-wrap: wrap; */

    margin-bottom:8%;
}

.header-texts, .header-filler{
    min-width:49%;
    min-height:120%;
}

.header-texts{
    height:fit-content;
    color:white;
}

.header-texts h1, 
.header-texts h3,
p abbr{
    color:var(--brighter-words1);
    transition: 500ms;
    transition-property: color;
}

.header-texts h1{
    font-size:4em;
    font-weight: bolder;
    transform: translateY(40px);
}

.header-texts h1:hover,
.header-texts h3:hover,
p abbr:hover{
    color:var(--brighter-words2);
    
}

.header-texts h3, .header-texts p{
    font-size: 1.5em;
    text-align: justify;
}

.header-filler{
    position:relative;
    /* outline: solid black 3px; */
    order:-1;
    margin-right:25px;
    flex-shrink:1;
}


.header-filler::before{
    content:" ";
    display: block;
    position:relative;

    top:5%;
    left:-100%;

    transform: skewY(5deg);

    width: 400%;
    height:100%;

    background:linear-gradient(270deg, var(--bolded-words1), var(--bolded-words2));
    background-size: 200% 200%;

    animation: bg-slide 5s linear infinite;

    z-index: -1;
}

@keyframes bg-slide{
    0%, 100%{background-position:0% 0%}
    25%, 75%{background-position:50% 50%}
    50%{background-position:100% 100%}
}

.content-aside{
    display:flex;
}

#content{
    margin-right: 2.5%;
    padding-right:5%;
    padding-left:2.5%;

    padding-top:10%;

    flex-direction: column;
}

.content-first,
.content-second{
    outline: 2px solid var(--bolded-words2);
    margin-bottom:5%;

    border-radius: 10px;
    background-color: var(--darker);

    position:relatve;
    width:100%;
    padding:10px;
}

.content-second h4{
    color:var(--bolded-words1);
}

.content-first h2, 
.content-second h2{
    color:var(--bolded-words1);

    text-align:center;

    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:-5%;

    padding:10px;
    border-radius:500px;

    border-left: 4px var(--bolded-words2) solid;
    border-right: 4px var(--bolded-words2) solid;

    position:relative;
    width:fit-content;
    background-color:var(--body-bg);

    transform:translateY(-75%);
}

.content-second h4{
    text-align:center;
}

aside{
    top:0px;
    position:sticky;
    height:fit-content;

    padding-top:100px;
    margin-bottom:5%;
}

aside a{
    color:var(--bolded-words1);
}

aside h2{
    color:var(--bolded-words2);
}

aside li{
    padding:5px;
}


#articles a{
    position:relative;

    top:-2%;
    left:30%;

    outline: 1px solid var(--bolded-words2);
    background-color:var(--bolded-words2);

    border-radius: 5px;;
    padding:10px 30px;

    transform:translate(0px, 0px);
    transition:200ms;
    transition-timing-function: ease-in;
}

#articles a:hover{

    position:relative;

    top:-3%;
    left:29%;

    color:goldenrod;

    border-radius:15px;
    text-decoration:none;

    transform:translate(0px, 0px);
    box-shadow: 5px 5px black;
}

#articles .article:nth-child(1) img{
    content:url("https://drive.google.com/thumbnail?id=1CX3EMFeranm5uGyppWoG4rne1WZAqxJU");
}


#articles .article:nth-child(2) img{
    content: url("https://media.tenor.com/SSY2V0RrU3IAAAAd/rick-roll-rick-rolled.gif");
}

#articles .article:nth-child(3) img{
    content: url("https://drive.google.com/thumbnail?id=1LFHV5hyQgo7u9gawqo6LKfiQGIq0xRZ1");
}

#articles .row-second img{
    content:url("https://drive.google.com/thumbnail?id=17ijLE6lY4HnvMGEtlCwmDBdQmFDhBey4");

    max-width: 50%;

    /* outline:4px solid black; */

    transform: rotate(0deg);
    transition:1000ms;
    transition-timing-function:ease-in-out;

    /* outline:5px solid black;     */
}

#articles .row-second img:hover{
    transition: 2000ms;
    transition-timing-function: cubic-bezier(0.81, -0.27, 0.25, 1.21);
    
    transform: rotate(1800deg);
}



.mini-one img:hover{
    box-shadow: 20px 20px 30px 2px rgb(42, 42, 42);
    top:-5px;
    left:-5px;
}

.mini-two img:hover{
    box-shadow: 20px 20px 30px 2px rgb(42, 42, 42);
    top:-5px;
    left:-5px;
}

.mini-three img:hover{
    box-shadow: 20px 20px 30px 2px rgb(42, 42, 42);
    top:-5px;
    left:-5px;
}

.mini-four img:hover{
    box-shadow: 20px 20px 30px 2px rgb(42, 42, 42);
    top:-5px;
    left:-5px;
}

.mini-one img:hover + .mini-content h2{
    color:var(--bolded-words1);
}
.mini-two img:hover + .mini-content h2{
    color:var(--bolded-words1);
}
.mini-three img:hover + .mini-content h2{
    color:var(--bolded-words1);
}
.mini-four img:hover + .mini-content h2{
    color:var(--bolded-words1);
}

.mini-one img{
    content:url("https://64.media.tumblr.com/777ac23e72e7a50a66080ec9d0eb1820/51dee1095a6f3d3a-00/s1280x1920/da7d112d40403f42939358e4d7391272518853e4.png")
}

.mini-two img{
    content:url("https://upload-os-bbs.hoyolab.com/upload/2023/02/17/56172291/dc9d74b9d0bc710b36ce589536419d49_2162292814265227178.jpg?x-oss-process=image%2Fresize%2Cs_1000%2Fquality%2Cq_80%2Fauto-orient%2C0%2Finterlace%2C1%2Fformat%2Cwebp")
}

.mini-three img{
    content:url("https://assetsio.reedpopcdn.com/honkai-star-rail-pom-pom.jpg?width=1920&height=1920&fit=bounds&quality=80&format=jpg&auto=webp")
}

.mini-four img{
    content:url("https://upload-os-bbs.hoyolab.com/upload/2022/04/23/12806146/b6be8d006ecd0bb47bb6c3624ea8d8e8_5385492655755377535.png")
}


@keyframes bobbin{
    0%, 100%{
        top:0;
        left:0;
    }
    25%{
        left:2px;
    }
    33%{
        top:5px;
        left:2px;
    }
    75%{
        right:-3px;
    }
    66%{
        top:-5px;
    }
}


footer{
    color:white;
    position:relative;

    margin-top:50px;
    width:100%;

    display:flex;
    justify-content: space-around;
    align-items: baseline;
    
    gap:2%;

    background-color: var(--nav-color);
}

footer .footer-credit{
    text-align:right;
}

footer::before{
    content:'';
    display: block;

    position:absolute;
    inset:0;

    background-color: var(--nav-color);
    transform: 
        scaleX(150%)
        scaleY(110%);

    z-index:-1;
}

form{
    text-align: center;
}

@media screen and (max-width: 500px){
    /* *{
        outline:2px solid red;
    } */

    nav{
        display:none;
    }



    .page-wrapper{
        margin-left:2.5%;
        /* margin-right:2.5%; */

    }

    #header{
        flex-wrap: wrap;
    }

    #header, #content, #creativity{
        padding-top: 0px;
        /* margin-bottom:50px; */
    }

    .header-texts h1{
        font-size: 3em;
    }

    .header-texts p{
        font-size: 1.2em;
    }

    .header-filler div{
        top:100px;
    }

    .header-filler::before{
        content:" ";
        display: block;
        position:absolute;

        top:50px;
        left:-100%;
    
        transform: skewY(5deg);
    
        width: 400%;
        height:450px;
    
        background:linear-gradient(270deg, var(--bolded-words1), var(--bolded-words2));
        background-size: 200% 200%;
    
        animation: bg-slide 5s linear infinite;
    
        z-index: -1;
    }

    #content{
        padding-top:20%;
        position:relative;

        width:90%;
    }

    .content-aside{
        display: block;

        margin:0;
        padding:0;
    }

    .content-first,
    .content-second{

        margin-bottom:15%;
    }

    aside{
        position:relative;;

        margin:auto;

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        align-content:space-around;

        padding-top:0px;
        top:-10px;
        width:100%;

        height:200px;

        /* float:left; */
    }

    aside li{
        position:relative;
        top:-20px;
        padding:0px;
    }

    .row-first{
        display: flex;
        /* flex-wrap: wrap; */
        flex-direction: column;
    }

    #articles{
        padding-top:20px;
    }

    #articles table{
        width:100%;
        border-spacing: 10px;
        left:-10px;
    }

    #articles table td{
        width:90%;
        position:relative;
        padding:20px;

        text-align:center;
    }

    #articles table tr.row-first td img{
        position:relative;

        margin:auto;

        max-width:250px;
        border-radius:5px;
    }

    #articles table tr.row-first td h3{
        position:relative;

        width:100%
    }

    .articles table .row-first td:nth-child(1),
    .articles table .row-first td:nth-child(3){
        background-color:var(--darker);
    }

    .articles table .row-second{
        display:flex;
        flex-direction: column;
    }

    .row-second td:nth-child(2){
        order:-1;;
    }

    .row-second td{
        background-color: var(--body-bg);
    }

    #articles table tr.row-first td h3,
    #articles .row-second h3{
        color:var(--bolded-words1);
    }

    #creativity{
        padding-top:20%;
    }

    .creativity{
        position:relative;

        text-align:center;
        padding-top:20px;
        margin:auto;

        width:100%;
    }

    .creativity img{
        max-width:50%;
        position:relative;

        top:0;
    
        transition:100ms;
        box-shadow: 0px 0px -10px -10px;
    
        animation: bobbin 3.5s infinite;
    }

    .creativity p{
        font-size:0em;
    
        transition:500ms;
    }

    .mini-one:hover img:hover + .mini-content p,
    .mini-two:hover img:hover + .mini-content p,
    .mini-three:hover img:hover + .mini-content p,
    .mini-four:hover img:hover + .mini-content p{
        font-size:1em;
    }
}

@media screen and (min-width: 1440px){
    
.header-filler div{
    outline:2px solid black;

    background-color:black;

    height:10px;
    width:25%;
    
    position:absolute;
    top:50%;
    left:50%;

    border-radius: 20px;

    transform-origin: 0% 50%;

    animation:spin 12s infinite linear;
}

.header-filler div::before{
    content:"";
    display: block;

    outline:2px solid black;

    background-color:black;

    height:10px;
    width:120%;
    
    position:absolute;
    top:50%;
    left:0%;

    border-radius: 20px;

    transform-origin: 0% 50%;

    animation:spin 15s infinite linear;
}

.header-filler div:hover{
    animation-play-state: paused;
}

@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}


#articles{
    padding-top:150px;
    position:relative;
}

#articles table{
    border-spacing: 25px;
    width:100%;
}

#articles table tr.row-first td{
    --border-color: var(--bolded-words2);
    background-color:var(--darker);

    padding:20px;
    width:30%;
    height:200px;

    border: 3px solid var(--border-color);
    border-radius:30px;
    position:relative;

    padding-top:5%;
    padding-bottom:3%;
}

#articles table tr.row-first td h3{
    color:var(--bolded-words2);
    text-align: center;

    border-top: 3px  dashed var(--bolded-words2);
    border-bottom: 3px dashed var(--bolded-words2);

    padding:5px;
}

#articles table tr.row-first td p{
    height:fit-content;
    padding-bottom:30px;
}

#articles .row-second h3,
#articles .row-second p{
    text-align: right;
}

#articles .row-second h3{
    color:var(--bolded-words1);
}

#articles table tr.row-first td img{
    margin-left: auto;

    max-height:150px;

    position:absolute;
    border-radius:20px;
    border: 1px solid var(--bolded-words2);

    left:10%;
    top:-25%;
}

#creativity{
    padding-top:120px;
}

.creativity-wrapper{
    position:relative;
    height:600px;
    isolation: isolate;

    margin-left:5%;
    margin-right:5%;

    display: flex;
    justify-content: space-around;
    gap:5%;
}

.creativity img{
    max-height:25%;
    position:relative;
    top:0;
    left:0;

    transition:100ms;
    box-shadow: 0px 0px -10px -10px;

    animation: bobbin 3.5s infinite;
}

.creativity h2,
.creativity p{
    text-align: center;
}

.creativity h2{
    color:var(--bolded-words2);

    position:relative;

    width:100%;
    top:0;
    left:0;

    transform:translate(0, 0);
    transition:200ms linear;
}

.creativity p{
    position:absolute;
    width:80%;

    top:50%;
    left:10%;

    font-size:1em;
    color:transparent;

    transition:500ms;
}

.mini-one,
.mini-two,
.mini-three,
.mini-four{
    /* position:relative; */
    display:flex;
    flex-direction: column;
}

.mini-two,
.mini-four{
    padding-top:2%;
}


.creativity img:hover + .mini-content p{
    color:var(--bolded-words1);
    font-size:1.5em;

    /* outline:5px solid black; */
}

.creativity img:hover + .mini-content p::before{
    content:"";
    display: block;

    position:absolute;
    opacity:0.5;

    top:-10%;
    left:-2%;

    width:30%;
    height:50%;

    border-top: 3px solid var(--bolded-words2);
    border-left: 3px solid var(--bolded-words2);
}

.creativity img:hover + .mini-content p::after{
    content:"";
    display: block;

    position:absolute;
    opacity: 0.5;

    top:60%;
    left:75%;

    width:25%;
    height:50%;

    border-bottom: 3px solid var(--bolded-words2);
    border-right: 3px solid var(--bolded-words2);
}

.mini-one:hover img:hover + .mini-content p,
.mini-two:hover img:hover + .mini-content p,
.mini-three:hover img:hover + .mini-content p,
.mini-four:hover img:hover + .mini-content p{
    color:var(--bolded-words1);
    font-size:1.5em;
}


}