/* this is just kinda here 
dont worry about none of this, just add stuff here*/

@font-face {
    src: url(fonts/RenogareSoft-Regular.ttf);
    font-family: renogareSoft;
}

@font-face {
    src: url(fonts/Renogare-Regular.otf);
    font-family: renogare;
}

@keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
}

body {
    font-family: renogare;
    text-shadow: 1px 1px .5px white, -1px 1px .5px white, -1px -1px .5px white, 1px -1px .5px white, 0px 1px .5px white, -1px 0px .5px white, 0px -1px .5px white, 1px 0px .5px white;
    cursor: url(images/backHeart.png);

    background: url(images/homePage.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
    
main {
    margin-left: 250px;
    margin-right: 250px;
    color: black;
    /* border: darkblue;
    border-width: 1px;
    border-style: solid; */
    margin-top: 150px;
    /*background-color: pink;*/
    height: 386px;
}

.icons {
    /* background-color: aquamarine; */
    max-width: 200px;
    float: left;
    margin-left: 5%;
    margin-top: 1%;
}

img#cool {
    outline-color: black;
    outline-width: 2px;
    outline-style: solid;
}

#flooy {
    background: url(images/homeUpdate.png); 
    margin-right:20px;
    margin-top: -14px;
    max-width: 277px;
    width: 327px;
    height: 416px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    overflow: auto;
    float: right;
}

#updtaes {
    /*background-color: rgba(137, 43, 226, 0.368);*/
    margin-top: 91px;
    margin-left: 5px;
    max-width: 252px;
    width: 252px;
    height: 251px;
    overflow: scroll;
    overflow: auto;
}

li {
    font-size: 70%;
}

/*
#newWindow {
    border-style: solid;
    border-color: antiquewhite;
    border-width: 3px;
    border-radius: 3px;
    max-width: 400px;
    float: left;
}
*/

h5 {
    text-align: center;
}

h4 {
    text-align: center;
}

footer {
    /*background-color: rgba(0, 255, 255, 0.422);*/
    width: 750px;
    margin-left: 330px;
    margin-top: 13px;
    height: 30px;
}
#imood {
    float: left;
    margin-top: 4px;
    margin-left: 5px;
    margin-right: 10px;
    /* background-color: antiquewhite; */
    size: 100%;
}

.marquee {
    margin-bottom: 0px;
    height: 25px;
    width: 607px;
    /*border-style: dashed; 
    background-color: blue;*/
    --gap: 0rem;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}
  
.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 120%;
    gap: var(--gap);

    animation-duration: 15s;
    animation-name: scroll;
    animation-iteration-count: infinite;
    animation-direction: left;
    animation-timing-function: linear;
}

/*
all code within the "marquee" Classes (as well as the scroll keyframes) are done by " https://ryanmulligan.dev/blog/css-marquee/ ", theres no way i would've figured this out on my own, fuck the marquee tag ily so much though ♥ 
*/

.screen {
    /* used to only have the temporary "background-color: pink;" attribute, which will no longer exist */
}

a:visited {
    color: black;
    text-decoration: none;
}

a:link {
    color: black;
    text-decoration: none;
}

#wards {
    /* background-color: blueviolet; */
    font-size: 70%;
    margin-top: 0px;
}

#linkOne {
    margin-right: 20px;
}

#linkTwo {
    /* background-color: blueviolet; */
    margin-right: 20px;
    margin-left: 9px;
}

#linkThree {
    margin-right: 20px;
}

#linkFour {
    margin-right: 20px;
    margin-left: 9px;
}

#linkFive {
    margin-right: 20px;
}

#linkSix {
    margin-right: 20px;
    margin-left: 9px;
}

#linkSeven {
    margin-right: 20px;
}

#linkEight {
    margin-right: 20px;
    margin-left: 9px;
}

p {
    background-color: blueviolet;
    margin-top: 0em;
    margin-bottom: 10em;
}