@font-face {
  font-family: Gidole-Regular;
  src: url(Gidole-Regular.ttf);
}
body {
    background-color: white;
    background-size: cover;
    margin: 0;
    color: #eef6fa;
    font-family: Gidole-Regular;
    background-image: url('../img/Öresundsbron-blur.jpg');

}

#content {
    display: flex;
    min-height: 100vh;
}


p {
    font-size: medium;
    margin: auto;
}

.card {
    text-align: center;
    margin: auto;
    border-radius: 5px;
}


img {
    width: 50%;
    height: auto;
    border-radius: 50%;
}

.profile {
    font-size: 1rem;
}

.links {
    padding-top: 2em;
}

.links a {
    padding: 0 0.3rem;
}



#footer a {
    font-size: small;
    text-decoration: none;
}

a {
    color: #ffe3b0;
    text-decoration: none;
}

a:hover {
    color: #ffd185;
}


@media (min-width:320px) {

    /* smartphones, iPhone, portrait 480x320 phones */
    .profile {
        width: 80%;
    }
}

@media (min-width:481px) {

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .profile {
        width: 80%;
    }
}

@media (min-width:641px) {

    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .profile {
        width: 40%;
    }
}

@media (min-width:961px) {

    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .profile {
        width: 30%;
    }
}

@media (min-width:1025px) {

    /* big landscape tablets, laptops, and desktops */
    .profile {
        width: 20%;
    }
}

@media (min-width:1281px) {

    /* hi-res laptops and desktops */
    .profile {
        width: 20%;
    }
    p{
        font-size: large;
    }
}