:root {
    background-image: url("../images/logo_back1.png");
    background-size: 200px;
    background-attachment: fixed;
    /*--mysize: 100vh; */

}


html{
    width:85%;
    min-width: 1300px;
    margin-left : auto;
    margin-right: auto;
    margin-top: 70px;
    margin-bottom: 70px;
}
/*html {overflow-x: initial !important;}*/



body {

    height:fit-content;
    min-width: 900px;
    border-style: solid; /* dashed;*/
    border-radius: 15px;
    border-width: 2px;
    border-color:  rgb(154, 103, 26);/* rgb(179, 101, 156);  */
    background-color: rgba(56,56,56,0.8);
    display:grid;

    row-gap: 20px;
    grid-template-rows: 2.5fr minmax(7fr auto) 1fr;
  /* grid-template-rows: 250px 200px minmax(300px, 1fr) 200px;*/
    grid-template-columns: 2fr  12fr  2fr;
    align-content: stretch;
    overflow: visible;
}



main{
    justify-self:stretch;
    grid-row: 2 / 3 ;
    grid-column: 2/ 3 ;
    justify-content: center;
    align-items: center;
    padding: 0px 40px 0px 40px;
    gap: 1vw;
    display:flex;
    height: 100%;
    flex-direction: column ;
    justify-content: center;
    align-items: center;
    align-content: center;
   /* align-content: center;*/
    background-color: rgba(34, 29, 29, 0.45);
    box-shadow: 0px 0px 6px 4px rgb(34, 29, 29) ;
    border-radius: 10px;
    font-size: 1rem;
    color: black;
    margin: 30px 30px 30px 30px;

}



.my_site{
    margin: 30px 0px 30px 0px;
    grid-row: 2/ 3;
    grid-column: 1/ 2;
    display: flex;
    flex-direction: column-reverse;
    transform: rotateZ(180deg);
    background-color: rgba(34, 29, 29, 0.45);
    box-shadow: -4px 0px 6px 4px rgb(34, 29, 29) ;
    border-radius: 10px 0px 0px 10px;
    justify-content: center;
    align-items: center;
    writing-mode:vertical-rl;
    writing-mode: sideways-rl;
    font-family: myfamily;
    font-size:x-large;
    box-sizing: border-box;
    height: 100%;
}


.media{
    margin: 30px 0px 30px 0px;
    grid-row: 2 / 3;
    color: #ffe4c4;
    grid-column: 3 / 4;
    display: flex;
    flex-direction: column;
    transform: rotateZ(180deg);
    background-color: rgba(34, 29, 29, 0.45);
    box-shadow: 4px 0px 6px 4px rgb(34, 29, 29) ;
    border-radius: 0px 10px 10px 0px;
    justify-content: center;
    align-items: center;
    writing-mode:vertical-lr;
    writing-mode: sideways-lr;
    font-family: myfamily;
    box-sizing: border-box;
    font-size:x-large;
    row-gap: 15px;
    align-items: center;
    height: 100%;
}




footer{
    display: grid;
    padding: 20px ;

    grid-row: 3 / 4 ;
    grid-column: 1/ 4 ;
   /* justify-content: center;
    align-items: center;*/
    margin-top: 30px;
    background-color: black;
    border-radius: 0px 0px 15px 15px;
   /*justify-content: center;
    align-items: center;*/
    grid-template-columns: 1fr, 1fr, 1fr;
    grid-template-rows: 1fr;
    padding: 10px ;
}



.footer1{
    padding: 10px ;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    justify-items: center;
    align-content: center;
}

.infooter1{
    padding: 10px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    height:25% ;
    color: white;
    font-size:small;
}

.footer2{
    padding: 10px ;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  /*  background-color: rgb(133, 114, 130);*/
    justify-items: center;
    align-content: center;
    text-align: center;
    color: white;
    font-size:small;
}

.infooter2{
    padding: 0px 10px 0px 10px ;
    display: flex;
    color: whitesmoke;
    flex-direction: row;
    align-items: center;
    border-style:solid;
    border-width: 0.7px;
    width:fit-content;
    height:50% ;
    border-color: rgb(181, 103, 158);
    background-color: rgb(34, 34, 34);/*rgba(34, 34, 34, 0.9);*/
    margin-bottom: 10px;

}
#privacy{
    margin-top: 10px;
}

#logC{
    padding-left: 10px;
}

.footer3{
    padding: 20px ;
    grid-row: 1 / 2;
    grid-column: 3 / 4;
   /* background-color: rgb(74, 204, 34);*/
    justify-items: center;
    align-content: center;
}
#infooter3{
    padding: 10px ;
    display: flex;
    flex-direction: row;
    align-items: center;
   /* border-style:solid;
    border-width: 2px;
    border-color: rgb(196, 48, 226);*/
}


header{
    display: grid;
    padding: 10px ;
    /*justify-self:stretch;*/
    grid-row: 1 / 2;
    grid-column: 1/ 4 ;
   /* justify-content: stretch;
    align-items:stretch;*/
    background-color: black;
    border-radius: 15px 15px 0px 0px;
    grid-template-columns: 1fr, 1fr;
    grid-template-rows: 1fr
}

.logo{
    grid-column: 1/2;
    grid-row: 1/2;
    padding:10px 10px 10px 10px;
    /*background-color: rgb(74, 204, 34);*/

}
 #inlogo{
    padding-left: 40px;

 }

.calendar{
    grid-column: 2/3;
   /* background-color: rgb(109, 199, 170);*/
    grid-row: 1/2;
    justify-content:stretch;
    justify-items: end;
    align-content: center;

}

.inCalendar{
    padding-right: 100px;
    color: rgb(90, 90, 90);
    display: flex;
    font-family: myDayFont;
    font-weight: 900;
    font-size:x-large;
    flex-direction: column;
    justify-content: center;
    align-items:center;
   /* border-style:solid;
    border-width: 2px;
    border-color: rgb(196, 48, 226);*/
}
/*
#day{
    font-size: 4.5rem;
}

#month{
    font-size: 2rem;
}
#day_week{
    font-size: 2rem;
}
    */
@font-face{
    font-family: myfamily;
    src:url("../resource/j_alex_green.ttf");
}


@font-face{
    font-family: myDayFont;
    src:url("../resource/ac_blur.ttf");
}
@font-face{
    font-family: peri;
    src:url("../resource/ac_chubby.ttf");
}


@font-face{
    font-family: project;
    src:url("../resource/ac_brie_light.ttf");
}

@font-face{
    font-family: ofTheMathematics;
    src:url("../resource/simplifica.ttf");
}


#p1{
    margin:5% 0% 0% 0%;
    position: relative;
    right: 0px;
    top:110px;
    color: rgb(253, 0, 0);
    font-family: peri;
    font-size: xx-large;
    font-weight: 800;
    animation-name: animyname1 ;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function:linear;
}


@keyframes animyname1 {
    0%{
        right: 0px;
        top:880px;
    } 30% {
        right: -50px;
        top:-800px;
    } 40% {
        right: 0px;
        top:-800px;
    } 70% {
        right: -50px;
        top:850px;
    } 80% {
        right: -50px;
        top:-850px;
    } 100% {
        right: 0px;
        top:850px;
    }

}

#p5{
    margin:0% 0% 0% 0%;
   /* color: rgb(82, 173, 20);*/
    position: relative;
    left: 0px;
    bottom:50px;
    animation-name: animyname2 ;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
    scale: 150%;
}

#p2{
    margin:0% 0% 0% 0%;
   /* color: rgb(82, 173, 20);*/
    position: relative;
    left: 0px;
    bottom:50px;
    animation-name: animyname1 ;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
    scale: 130%;
}
#p4{
    color: rgb(253, 0, 0);
    font-family: ofTheMathematics;
    font-weight: 800;
    font-size:xx-large;
}



#p3{
    color:rgb(154, 103, 26);
    font-family: project;
    font-weight: 800;
    font-size:xx-large;
}

#p5{
    transform:rotateZ(90deg);
     scale: 150%;
}


@keyframes animyname2 {
    0%{
        left: 0px;
       bottom:-3900px;
    } 25% {
        left: -45px;
        bottom:-1000px;
    } 50% {
        left: 45px;
        top: 2000px;
    } 75% {
        left: 0px;
        bottom:3700px;
    }  100% {
        left: 0px;
        bottom:-2000px;
    }
}