body {
    /*font-family: Arial, sans-serif;*/
    font-family: Roboto;
    text-align: center;
}

h1 {
    font-size: 24px;
    margin-top: 30px;
}

h2 {
    font-size: 18px;
    margin-top: 20px;
}

p {
    font-size: 14px;
    margin-top: 10px;
}

.headline {
    color: #FF5A2D;
    font-family:Roboto;
    font-style: normal;
    font-weight: 700;
    line-height: normal;    
    font-size: 15vw;
    margin-top: 30px;    
}

.subheadline {
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 5vw;
    line-height: normal;
    margin-bottom: 30px;
}

.line {
    margin: auto;
    width: 70%;
    border-top: 2px solid black; /* Ändra här */
    opacity: 100;    
    display: block; /* Sätt display till block */
}

/*.certificate {
    width: 90%;
    height: 100%;*/ /* Change height to 100% */
    /*margin: 0 auto;
    background-color: #E4E4E4;
    position: relative;
    padding: 20px;
    box-sizing: border-box;*/
    /*display: flex;*/ /* Add display flex to allow vertical centering */
    /*flex-direction: column;*/ /* Add flex-direction column to stack elements */
    /*justify-content: space-between;*/ /* Add justify-content space-between to push elements apart */
/*}*/

.certificate {
    width: 90%;
    max-height: 100vh; /* Se till att den inte överstiger skärmens höjd */
    margin: 0 auto;
    background-color: #E4E4E4;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto; /* Lägg till denna regel för att tillåta skrollning om innehållet blir för mycket */
}

.nameheaders {
    color: black;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    font-size: 3vw;
    line-height: normal;
    margin-bottom: -10px;
    line-height: 1;
}

.resultheaders {
    color: black;
    text-align:center;
    font-style:normal;
    font-weight: 700;
    font-size:3vw;
    line-height:normal;
    margin-top: 10px;
    margin-bottom:0px;
    line-height: 1;
}

.validheaders {
    color: black;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    font-size: 3vw;
    line-height: normal;
    margin-top: 20px;
    margin-bottom: -10px;
    line-height: 1;
}

.resulttext {
    color: black;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 3vw;
    line-height: normal;
    margin-top: -10px;
    line-height: 1;
}

/*.results {*/
    /*display: flex; /* Add display flex */
    /*justify-content: center;*/ /* Add justify-content center to center the image horizontally */
    /*align-items: center;*/ /* Add align-items center to center the image vertically */
    /*width: 35%;*/ /* Change width to 100% */
    /*height: 100px;*/ /* Add a height value */
    /*margin: 70px auto;
}*/

.results {
    display: flex;
    flex-direction: column; /* Organiserar innehållet vertikalt */
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 40px 0;
}


.name {
    color: black;
    font-family: Roboto;
    font-size: 6vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: -10px;
}

.datum {
    font-size: 14px;
    margin-top: 1px;
}

.andel {
    font-size: 14px;
    margin-top: 1px;
    color: green;
}

.dates {
    /*display: flex;*/ /* Add display flex to allow vertical centering */
    flex-direction: column;
    margin-bottom:30px;
}

.mainsponsor {
    display: flex; /* Add display flex */
    justify-content: center; /* Add justify-content center to center the image horizontally */
    align-items: center; /* Add align-items center to center the image vertically */
    width: 100%; /* Change width to 100% */
    height: 100px; /* Add a height value */
}

.mainsponsor img {
    width: 150px; /* Change width to 100% */
    height: auto; /* Change height to auto */
}

/*.bottom-images {*/
    /*display: flex;*/
    /*justify-content: center;
    align-items: flex-end;*/ /* Change align-items to flex-end */
    /*margin-top: auto;
}*/

.bottom-images {
    display: flex;
    justify-content: center;
    align-items: center; /* Centrera innehållet vertikalt */
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
}


    .bottom-images img {
        width: 100px;
        height: auto;
        margin: 0 10px;
    }


.bottom-images-text {
    font-size: 14px;
    margin-top: 10px;
}

/* --- Resultat-badges (små "pill"-etiketter) --- */
.pill {
    display: inline-block;
    padding: 2px 10px;
    margin-left: 8px;
    border-radius: 9999px;
    font-size: 0.9rem;
    line-height: 1.6;
    background: #e9edf5;
    color: #1b2430;
    vertical-align: middle;
}

.pill--accent {
    background: #ddeffd;
    color: #0b4c8c;
    font-weight: 600;
}

/* Spacing som alltid syns även i tomma divar */
.spacer {
    display: block;
    height: 24px; /* välj 16–32px efter smak */
}