#Contact{

    margin-left:10px;
    margin-right:10px;

    #contact-ways{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:40px;
        @media only screen and (max-width:930px){
            grid-template-columns: 1fr;
        }
    }

    #contact-form{
        display: grid;
        grid-template-columns: auto;
        gap:15px;
        input{
            background-color: #cdeaf8;
            border: none;
            border-radius: 7px;
            height: 40px;
            padding:2px 20px 2px 20px;
            font-size: 18px;
        }
        #message{
            height: 150px;
            resize: none;
            background-color: #cdeaf8;
            border: none;
            border-radius: 7px;
            padding:10px 20px 10px 20px;
            font-size: 18px;
        }
        button{
            padding: 10px 20px;
            background: #dbeaf6;
            border: 2px solid transparent; 
            color: #575380;
            font-size: 16px;
            transition: background-color 0.4s ease, color 0.4s ease, border 0.4s ease; 
            border-radius: 7px;
        }
        button:hover {
            cursor: pointer;
            border: 2px solid transparent; 
            background-color: #15293a;
            color: white;
        }
        #buttons{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap:10px;
        }
        h1{
            text-align: left;
            color: #3bdd2c;
            font-size: 1.5em;
            text-align: start;
        }
    }
    #contact-info {
        display: grid;
        grid-template-rows: 1fr 1fr 3fr 1fr;
        gap: 20px;
    }

    #E-mail-info,
    #Phone-info {
        display: grid;
        grid-template-columns: 1fr 3fr;
        align-items: center;
        background-color: #cdeaf8;
        border-radius: 7px;
        position: relative;
    }
    
    #E-mail-info i,
    #Phone-info i {
        font-size: 30px;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #b0d6f5;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
        border-top-right-radius: 0px;
    }
    
    #E-mail-info p,
    #Phone-info p {
        font-size: 20px;
    }
    
    #E-mail-info i:hover,
    #Phone-info i:hover {
        background-color: #71a3cc;
        cursor: pointer;
    }
    
    .copy-animation {
        display: none;
        position: absolute;
        top: 50%;
        left: 6%;
        transform: translateY(-50%);
        background-color: #1e2935;
        color: white;
        padding: 2%;
        border-radius: 5px;
        font-size: 14px;
    }
    
    .show {
        display: block;
        opacity: 1;
    }

    #social-links {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        justify-items: center;
        background-color: #cdeaf8;
        border-radius: 7px;
    }

    #social-links i {
        font-size: 30px;
        height: 100%;
        width: 100%;
        display: flex;
        background-color: #cdeaf8;
        justify-content: center;
        align-items: center;
        border-radius: 7px;
    }

    #social-links i:hover {
        background-color: #71a3cc;
        cursor: pointer;
        border-radius: 7px;
    }

    #references {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .reference{
        display: grid;
        grid-template-rows: 1fr 3fr;
        background-color: #cdeaf8;
        border-radius: 7px;

        #namebox{
            display: grid;
            grid-template-columns: auto auto;
            gap:20px;
            font-size: 30px;
            height: 100%;
            width: 100%;
            justify-content: center;
            align-items: center;
            background-color: #b0d6f5;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
    }
    .userinfo {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto 1fr;
        gap:20px;
        padding:10px 10px 10px 10px;
        margin: 0 auto;
        background-color: #cdeaf8;
        border-radius: 7px;
        text-align: left;
        font-size: 15px;
    }
}