body {
    /*background-image: url(https://wallpapers.com/images/hd/studio-ghibli-desktop-overlooking-road-73mlnihqjycdiatm.jpg);*/
    background-image: url(background.jpg);
    /*background-image: url(yellow%20backgroup.jpg);*/
    /*background-image: url(https://64.media.tumblr.com/888ee4741fc0181655483d66ba17c063/tumblr_o04pk8Hfm81s6bqo7o2_500.gif);*/    
    background-repeat: no-repeat;
    background-attachment:fixed; 
    /* background-attachment:scroll; */
    background-size:cover;
    /*background-position: center;*/
    margin: 0;
    overflow-x: visible;
    overflow-y: scroll;
}
 
* {
  box-sizing: border-box;
}

/* header 1111111111111111111111111111111111111 */
.header {
    position: relative;
    height: 750px;
    width:100%;
  /* border-style: solid; */
  /* border-color: black; */
}

#background-image {
    background-image: url(IMG_3027.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    transition: 0.5s ease;
}

#background-image:hover {
    -webkit-filter: blur(4px);
    transition: 1s ease;
}

.headercontent p {
    text-align: center;
    position: absolute;
    top: 350px;
    color: white;
    font-size: 50px;
    font-family: 'Rottering';
    left:58%;
}

.headercontent h1 {
    position: absolute;
    top: 415px;
    text-align: center;
    font-size: 80px;
    left: 61%;
    color: lightgoldenrodyellow;
    font-family: 'Rottering';
    text-shadow: 5px 2px 20px white;
}



.aboutme {
    position:relative; 
    width: 100%;
    margin-left:10%;
    margin-right:10%;
    height:500px;
}

.aboutme h1{
    position: absolute;
    color:#6E2C00;
    font-size:370%;
    font-family: 'Rottering';
    width: 600px;
}

.aboutme h2{
    position:absolute;
    color:black;
    font-size:30px;
    font-family: 'Rottering';
    /*width: 600px;*/
    left:580px;
    top:110px;
    width: 600px;
} 

.aboutme p{
    position: relative;
    top:190px;
    color:#784212;
    font-size:20px;
    font-family: Arial, sans-serif;
    width: 1200px;
}

.aboutme button{
    position:relative;
    top:220px;
    background-color: #6E2C00;
    color: white;
    font-size: 25px;
    border: 2px solid #6E2C00;
    border-radius: 40px;
    padding: 14px 32px;
    text-decoration: none;
    transition: 1s ease;
}

.aboutme a{
    text-decoration: none;
    color: white;
    transition: 1s ease;
}

.aboutme a:hover{
    color: black;
    transition: 1s ease;
}

.aboutme button:hover{
    background-color: white;   
    color: black; 
    transition: 1s ease;
}

.researchproject {
    position:relative;
    width: 100%;
    padding-left:10%;
    padding-right:10%;
    height: 500px;
}

.researchproject h1{
    position: absolute;
    color:#6E2C00;
    font-size:60px;
    font-family: 'Rottering';
    right:10%;
}

.button-research {
    position:absolute;
    height: 400px;
    width: 100%;
    top: 20%;
    left:0;
}

.button-UHI {
    position:absolute;
    right:10%;
    top:5%;
    width:35%;
    background-color:#f9f9b8;
    color: #6E2C00;
    border: 2px;
    border-radius: 80px;
    padding: 50px 150px;
    font-family: Arial, sans-serif;
}

.button-UHI:hover {
    background-color:#f6ddd5;   
    color: #6E2C00; 
}

.Urban {
    position:absolute;
    font-size: 25px;
    top:20%;
    left:6%;
}

.Doctoral {
    position:absolute;
    top:58%;
    left:6%;
    font-size: 18px;
}

.year-urban {
    position:absolute;
    right:5%;
    top:35%;
    font-size: 25px;
}


.button-Rural {
    position:relative;
    left:10%;
    top:60%;
    width:50%;
    background-color:#f9f9b8;
    color: #6E2C00;
    border: 2px;
    border-radius: 80px;
    padding: 50px 150px;
    font-family: Arial, sans-serif;
}

.button-Rural:hover {
    background-color:#f6ddd5;   
    color: #6E2C00; 
}

.Rural {
    position:absolute;
    font-size: 25px;
    top:20%;
    left:6%;
}

.Master {
    position:absolute;
    top:58%;
    left:6%;
    font-size: 18px;
}

.year-rural {
    position:absolute;
    right:5%;
    top:35%;
    font-size: 25px;
}


.button-Poverty {
    position:absolute;
    left:20%;
    top:30%;
    width:30%;
    background-color:#f9f9b8;
    color: #6E2C00;
    border: 2px;
    border-radius: 80px;
    padding: 50px 150px;
    font-family: Arial, sans-serif;
}

.button-Poverty:hover {
    background-color:#f6ddd5;   
    color: #6E2C00; 
}

.poverty {
    position:absolute;
    font-size: 25px;
    top:20%;
    left:6%;
}

.survey {
    position:absolute;
    top:58%;
    left:6%;
    font-size: 18px;
}

.year-survey {
    position:absolute;
    right:5%;
    top:35%;
    font-size: 25px;
}



.newest-outcomes{
    position:relative;
    height:510px;
}

.newest-outcomes h1{
    position: absolute;
    color:#6E2C00;
    font-size:60px;
    font-family: 'Rottering';
    left:10%;
    z-index: 1; 
}

.all-outcome-box{
    position:relative;
    top:15%;
    height: 380px;
    width: 100%;
    background-color: rgba(249, 249, 184, 0.5);
    /*border-radius: 100px;*/
}

.action-map-container {
    position: absolute;
    top:18%;
    left:10%;
    width: 24%;
    height: 270px;
    overflow: hidden;
}

.map-image {
    display: block;
    width: 120%;
    height: auto;
    background-position: center;
}

.map-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #f6ddd5;
}

.action-map-container:hover .map-overlay {
    opacity:1;
}

.map-text {
    color: #6E2C00;
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
}


.info-container {
    position: absolute;
    top:18%;
    left:37%;
    width: 24%;
    height: 270px;
    overflow: hidden;
}

.info-image {
    display: block;
    width: 120%;
    background-position: center;   
}

.info-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #f6ddd5;
}

.info-container:hover .info-overlay {
    opacity:1;
}

.info-text {
    color: #6E2C00;
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
}

.publication-container {
    position: absolute;
    top:18%;
    left:64%;
    width: 24%;
    height: 270px;
    overflow: hidden;
}

.publication-image {
    display: block;
    width: 100%;
    background-position: center;   
}

.publication-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #f6ddd5;
}

.publication-container:hover .publication-overlay {
    opacity:1;
}

.publication-text {
    color: #6E2C00;
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
}

.value {
    position:relative;
    left:0;
    height:500px;
    width:100%;
}

.value h1{
    position:absolute;
    left:50%;
    transform: translate(-50%, -50%);
    color:#6E2C00;
    font-size:60px;
    font-family: 'Rottering';
}

#Global{
    position:absolute;
    top:10%;
    left:10%;
    color:#6E2C00;
    font-size:45px;
    font-family: 'Rottering';
    
}

#global-text {
    position:absolute;
    top:25%;
    left:10%;
    color:#784212;
    font-size:20px;
    font-family: Arial, sans-serif;
    width:50%;
}

#Justice{
    position:absolute;
    top:35%;
    left:30%;
    color:#6E2C00;
    font-size:45px;
    font-family: 'Rottering';  
}

#justice-text {
    position:absolute;
    top:50%;
    left:30%;
    color:#784212;
    font-size:20px;
    font-family: Arial, sans-serif;
    width:56%;
}

#Feminism{
    position:absolute;
    top:66%;
    left:48%;
    color:#6E2C00;
    font-size:40px;
    font-family: 'Rottering';  
}

#feminism-text {
    position:absolute;
    top:81%;
    left:48%;
    color:#784212;
    font-size:20px;
    font-family: Arial, sans-serif;
    width:45%;
}

.photo{
    position:relative;
    top:0px;
    height:700px;  
}

.photo h1{
    position:absolute;
    top:30%;
    right:10%;
    width:35%;
    color:#6E2C00;
    font-size:30px;
    font-family: 'Rottering';
    z-index: 1;
    text-align: end;
    text-shadow: 5px 2px 6px white;
}

#p1{
    position: absolute;
    top:-300px;
    left:6%;
    width:40%;
    height:auto;
    overflow: hidden;
    animation: bobbing 1s infinite alternate;
}


.contact{
    position:absolute;
    top:50%;
    right:10%;
    height:auto;
    text-align:end;
}

.contact h1{
    position: absolute;
    width:100%;
    right:0px;
    top:0px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #6E2C00;
}

.contact p{
    position: relative;
    top:40px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #6E2C00;
}

.contact img{
    position: absolute;
    top:50px;
    position:relative;
    width:70px;
}



/* FONTS */

@font-face {
    font-family: 'Rottering';
    src: url(rottering-p7dar.woff) format('woff');
}

/*@font-face {
    font-family: 'Destine';
    src: url(destinepersonaluseregular-6yaev.woff) format('woff');
}*/

@keyframes bobbing {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-30px); /* Adjust the bobbing distance as needed */
  }
}


@media screen and (max-width: 481px){
    
    .header{
        padding:0;
        width:100%;
        height:600px;
    }
    #background-image {
        background-position:80% 60%;
        height:100%;
        background-attachment: scroll;     
    }
    
    .headercontent p {
    text-align: center;
    position: absolute;
    top: 300px;
    font-size: 25px;
    left:30%;
    }

    .headercontent h1 {
    font-size: 40px;
    left: 40%;
    top:350px;
    }
    
    
    .aboutme {
    position:relative; 
    width: 100%;
    margin:0;
    height:auto;
    padding: 10%;
    }

    .aboutme h1{
    position: relative;
    color:#6E2C00;
    font-size:25px;
    font-family: 'Rottering';
    width: 80%;
    left:0px;
    margin: 0px;
    }

    .aboutme h2{
    position:relative;
    color:black;
    font-size:22px;
    font-family: 'Rottering';
    /*width: 600px;*/
    left:0;
    width: 100%;
    margin-bottom: 2%;
    margin-top: 2%;
    top:auto;
    }
    
    .aboutme p{
    position: relative;
    top:auto;
    color:#784212;
    font-size:16px;
    font-family: Arial, sans-serif;
    width: 100%;
    left:0px;
    }
    
    .aboutme button{
    position:relative;
    top:auto;
    font-size: 20px;
    }
  
    
    .researchproject {
        position:relative;
        width: 100%;
        height: 350px;
        padding-left:10%;
        padding-right:10%;
}

    .researchproject h1{
    position: relative;
    top:auto;
    color:#6E2C00;
    font-size:25px;
    right:0;
}

    .button-research {
    position:relative;
    height: auto;
    width: 100%;
    top: auto;
    left:0;
}

    .button-UHI {
    position:relative;
    left:0;
    right:0px;
    top:0;
    width:100%;
    background-color:#f9f9b8;
    color: #6E2C00;
    border: 0px;
    border-radius: 80px;
    padding: 30px 0px;
    font-family: Arial, sans-serif;
}

    .Urban {
    position:absolute;
    font-size: 18px;
    top:20%;
    left:6%;
}

    .Doctoral {
    position:absolute;
    top:58%;
    left:6%;
    font-size: 15px;
}

    .year-urban {
    position:absolute;
    font-size: 18px;
    left:auto;
    right:6%;
    top:35%;
}


    .button-Poverty {
    position:relative;
    left:0;
    top:auto;
    width:100%;
    border: 0px;
    top:15px;
    padding:40px 0px;
    }

    .poverty {
    position:absolute;
    font-size: 18px;
    top:20%;
    left:6%;
}

    .survey {
    position:absolute;
    top:58%;
    left:6%;
    font-size: 15px;
}

    .year-survey {
    position:absolute;
    font-size: 18px;
    right:5%;
    top:35%;
}
    
    
    .button-Rural {
    position:relative;
    left:0;
    top:auto;
    width:100%;
    border: 0px;
    padding: 45px 0px;
    top:30px;
}

    .Rural {
    position:absolute;
    font-size: 18px;
    top:20%;
    left:6%;
    text-align: left;
}

    .Master {
    position:absolute;
    top:70%;
    left:6%;
    font-size: 15px;
}

    .year-rural {
    position:absolute;
    font-size: 18px;
    right:5%;
    top:45%;
}

    .newest-outcomes{
    position:relative;
    height:750px;
}

.newest-outcomes h1{
    position: absolute;
    color:#6E2C00;
    font-size:25px;
    font-family: 'Rottering';
    left:10%;
    z-index: 1; 
}

.all-outcome-box{
    position:relative;
    top:25px;
    height: 700px;
    width: 100%;
    background-color: rgba(249, 249, 184, 0.5);
}

.action-map-container {
    position: absolute;
    top:40px;
    left:10%;
    width: 80%;
    height: 200px;
    overflow: hidden;
}


.map-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #f6ddd5;
}


.map-text {
    color: #6E2C00;
    font-size: 20px;
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
}


.info-container {
    position: relative;
    top:260px;
    left:10%;
    width: 80%;
    height: 200px;
    overflow: hidden;
}

.info-image {
    display: block;
    width: 100%;
    background-position: center;   
}

.info-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #f6ddd5;
}

.info-text {
    color: #6E2C00;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
}

.publication-container {
    position: absolute;
    top:480px;
    left:10%;
    width: 80%;
    height: 200px;
    overflow: hidden;
}

.publication-image {
    display: block;
    width: 100%;
    background-position: center;   
}

.publication-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #f6ddd5;
}

.publication-text {
    color: #6E2C00;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
}

    .value {
    position:relative;
    left:0;
    height:350px;
    width:100%;
}

.value h1{
    position:absolute;
    left:50%;
    top:0px;
    transform: translate(-50%, -50%);
    color:#6E2C00;
    font-size:25px;
    font-family: 'Rottering';
}

#Global{
    position:relative;
    top:15%;
    left:10%;
    margin: 0px;
    color:#6E2C00;
    font-size:22px;
    font-family: 'Rottering';
    
}

#global-text {
    position:relative;
    margin: 0px;
    top:16%;
    left:10%;
    color:#784212;
    font-size:16px;
    font-family: Arial, sans-serif;
    width:80%;
}

#Justice{
    position:absolute;
    top:35%;
    right: 10%;
    text-align: end;
    color:#6E2C00;
    font-size:22px;
    font-family: 'Rottering';  
}

#justice-text {
    position:absolute;
    top:45%;
    left:auto;
    right:10%;
    color:#784212;
    font-size:16px;
    font-family: Arial, sans-serif;
    width:80%;
    text-align: end;
}

#Feminism{
    position:absolute;
    top:65%;
    left:10%;
    color:#6E2C00;
    font-size:22px;
    font-family: 'Rottering';  
}

#feminism-text {
    position:absolute;
    top:75%;
    left:10%;
    color:#784212;
    font-size:16px;
    font-family: Arial, sans-serif;
    width:70%;
}
    
    .photo{
    position:relative;
    top:0px;
    height:400px;  
}

.photo h1{
    position:absolute;
    top:0;
    left:10%;
    right:auto;
    width:80%;
    color:#6E2C00;
    font-size:22px;
    font-family: 'Rottering';
    z-index: 1;
    text-align:left;
    text-shadow: 5px 2px 6px white;
}

#p1{
    position: absolute;
    top:10%;
    left:50%;
    width:40%;
    height:auto;
    overflow: hidden;
    animation: bobbing 1s infinite alternate;
}
    
    .contact{
    position:absolute;
    top:50%;
    right:10%;
    height:auto;
    text-align:end;
}

    .contact{
        position: relative;
        top:30%;
        width: 100%;
        padding: 10%;
        left: 0;
    }
    
.contact h1{
    position: absolute;
    width:80%;
    right:0px;
    top:80px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #6E2C00;
}

.contact p{
    position:relative;
    text-align: left;
    top:70px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #6E2C00;
}

/*.contact a{
    position: absolute;
    top:50px;
    width:100%;
    left:0px;
    right: 80%;
    height:auto;
    text-align: left;
}*/

    .contact img{
    top:210px;
    position:absolute;
    width:50px;
    left:7%; 
}
    
}
    
/*    body{
        float:left;
        padding:0;
        width:94%;
        margin: 3%;
    }*/
}