﻿html {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background-image: url('Images/Frame 10 new new.png');
}

#Wrapper {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

form {
    grid-column: 1;
    grid-row: 1;
    margin-left: 100px;
    margin-top: 10px;
    margin-bottom: auto;
}
.Rubrik_text {
    color: white;
}

.text {
    color: white;
}

.bild_video {
    color: white;
}
p{
    color: white;
}
.creat_text {
    color: white;
}
#linkstyle {
    grid-column: 1;
    grid-row: 1;
    margin-left: 100px;
    margin-top: 10px;
    margin-bottom: auto;
}
/* From uiverse.io by @mrhyddenn */
.form__group {
    position: relative;
    padding: 20px 0 0;
    margin-top: 10px;
    width: 100%;
    max-width: 180px;
}

.form__field {
    font-family: inherit;
    width: 100%;
    border: none;
    border-bottom: 2px solid #9b9b9b;
    outline: 0;
    font-size: 17px;
    color: #fff;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
}

    .form__field::placeholder {
        color: transparent;
    }

    .form__field:placeholder-shown ~ .form__label {
        font-size: 17px;
        cursor: text;
        top: 20px;
    }

.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 17px;
    color: #9b9b9b;
    pointer-events: none;
}

.form__field:focus {
    padding-bottom: 6px;
    font-weight: 700;
    border-width: 3px;
    border-image: linear-gradient(to right, #116399, #38caef);
    border-image-slice: 1;
}

    .form__field:focus ~ .form__label {
        position: absolute;
        top: 0;
        display: block;
        transition: 0.2s;
        font-size: 17px;
        color: #38caef;
        font-weight: 700;
    }

/* reset input */
.form__field:required, .form__field:invalid {
    box-shadow: none;
}
.link_to_button {
    font: bold 11px Arial;
    text-decoration: none;
    border-radius: 5px;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}


/*on screens that are 414px wide or less*/
@media screen and (max-width:414px) {
    body {
        background-image: url('Images/Frame 10 mobile.png');
    }
}